<template>
    <div class="main_con">
        <div class="main_top">
            <div class="main_top_left">
                <el-card  class="data_area">
                    <h3 style="font-weight:700">数据概览</h3>
                    <el-row>
                        <el-col :span="6" >
                            <div class="data_area_child" style="margin:10px 12px 0px 0px">
                                <p>惠采购订单统计</p>
                                <div class="nun_btn">
                                    <span>{{toThousand(amount.hcgOrderCount)}}</span>
                                    <el-button type="text" class="btn" @click="goPath('/ordermg/hcgOrder/list')">查看订单</el-button>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="data_area_child" style="margin:10px 9px 0px 6px">
                                <p>惠采购收益</p>
                                <div class="nun_btn">
                                    <span>{{toThousand(amount.hcgSeetAmount)}}</span>
                                    <el-button type="text" class="btn" @click="goPath('/settmg/hcgSettItem/list')">查看结算</el-button>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6" >
                            <div class="data_area_child" style="margin:10px 6px 0px 9px">
                                <p>保函订单统计</p>
                                <div class="nun_btn">
                                    <span>{{toThousand(amount.guarOrderCount)}}</span>
                                    <el-button type="text" class="btn" @click="goPath('/ordermg/guaOrder/list')">查看订单</el-button>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="data_area_child" style="margin:10px 0px 0px 12px">
                                <p>保函收益</p>
                                <div class="nun_btn">
                                    <span>{{toThousand(amount.guarSeetAmount)}}</span>
                                    <el-button type="text" class="btn" @click="goPath('/settmg/settItem/list')">查看结算</el-button>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </div>

            <!-- <div class="main_top_right">
                <el-card class="tq_area">
                    <p>{{getYearMonDayDate() + '&nbsp;&nbsp;' + getWeekDate()}}</p>
                    <h3>阜阳市天气</h3>
                    <div>
                        <span><b>16</b>℃</span>
                        <span>多云</span>
                        <span>空气优</span>
                    </div>
                </el-card>
            </div> -->
        </div>

        <div class="main_bottom">
            <div class="main_bottom_left">
                <el-card style="height:100%;">
                    <div class="title">
                        <h3>今日开标项目  <span @click="goPath('/ordermg/hcgOrder/list')">全部订单</span></h3>
                    </div>
                    <el-table  :data="tableData" :header-cell-style="{ background: '#f4f7f9' }" :height="tableHeight" >
                        <el-table-column type="index" width="40"></el-table-column>
                        <el-table-column prop="bidAgencyName" label="招标代理名称"></el-table-column>
                        <el-table-column prop="tenderProjectName" label="招标项目" min-width="90"></el-table-column>
                        <el-table-column prop="bidSectionName" label="标段名称"></el-table-column>
                        <el-table-column prop="bidOpenTime" label="开标时间"></el-table-column>
                        <!-- <el-table-column prop="" label="操作" >
                            <template slot-scope="scope" >
                                <el-button type="text">查看信息</el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <my-pagination
                        ref="page"
                        v-model="tableData"
                        :after-query="afterQuery"
                        :action="$store.getters.desktop + '/bidOpenTody'">
                    </my-pagination>
                </el-card>
            </div>
            <div class="main_bottom_right">
                <div class="info_area">
                    <el-card >
                        <h3>单位信息</h3>
                        <div>
                            <p>{{this.getGetters('user').dwname}}</p>
                            <el-button type="text" icon="el-icon-circle-plus-outline" @click="goPath('/partnermg/partner/list')">添加合作单位信息</el-button>
                        </div>
                    </el-card>
                </div>

                <div class="matter_area">
                    <el-card >
                        <h3>代办事项</h3>
                        <div class="info">
                            <div class="icon">
                                <img :src="iconSrc" alt="" style="">
                            </div>
                                <!-- <span>企业采购待结算标段：<span style="color:#6498ff">200</span> 个</span> -->
                                <span>{{todoList[0]}}</span>
                        </div>
                        <div class="info">
                            <div class="icon">
                                <img :src="iconSrc" alt="" style="">
                            </div>
                            <!-- <span>电子保函待结算订单：<span style="color:#6498ff">200</span> 条</span> -->
                             <span>{{todoList[1]}}</span>
                        </div>
                    </el-card>
                </div>

                <div class="login_area">
                    <el-card >
                        <h3>上次登录</h3>
                        <div>
                            <p>登录时间：{{lastLogin.lastlogintime}}</p>
                            <p>IP地址：{{lastLogin.lastloginip}}</p>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import  icon from '@assets/icon.png'


export default {

    data(){
        return{
            tableData:[],
            tableHeight:'300',
            iconSrc: icon,
            amount:{
                guarOrderCount:'',
                guarSeetAmount:'',
                hcgOrderCount:'',
                hcgSeetAmount:'',
            },
        
            todoList:[],
            lastLogin:{},
        }
    },
    computed: {
       
    },
    watch:{
        
    },
    methods: {
        //获取年月日
        getYearMonDayDate:function(){
            var myDate=new Date();
            var year = myDate.getFullYear();
            var month = myDate.getMonth()+1 < 10 ? "0" + (myDate.getMonth()+1) : myDate.getMonth()+1;
            var day = myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate();
            return year + "/" + month + "/" + day
        },

        //获取星期
        getWeekDate:function() {
            var now = new Date();
            var day = now.getDay();
            var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
            var week = weeks[day];
            return week;
        },
        toThousand:function(num){
              var result = [ ], counter = 0;
                num = (num || 0).toString().split('');
                for (var i = num.length - 1; i >= 0; i--) {
                    counter++;
                    result.unshift(num[i]);
                    if (!(counter % 3) && i != 0) { result.unshift(','); }
                }
                return result.join('');

        },
        goPath(val){
            this.goto({
                path:val
            })
        },
        //获取数据概览
        getOverview:function(){
            this.$get(this.$store.getters.desktop + '/dataOverview',{},function(data){
                this.amount = data;
            })
        },
        //获取代办事项
        getTodoList:function(){
            this.$get(this.$store.getters.desktop + '/todoList',{},function(data){
                this.todoList = data;
            })
        },
        //获取上次登录
        getLastLogin:function(){
            this.$get(this.$store.getters.desktop + '/lastLogin',{},function(data){
                this.lastLogin = data;
            })
        },
        setTableheight:function(){
            this.tableHeight = (window.innerHeight - 408);
        },
        afterQuery:function(){
            this.setTableheight();
        },
    },
    mounted:function(){
        //监听浏览器窗口变化
        window.onresize = () => {
            this.$nextTick(function(){
                this.setTableheight();
            })
        };
        this.getOverview();
        this.getTodoList();
        this.getLastLogin();
    },
    //注销window.onresize事件
    destroyed:function(){
        window.onresize = null;
    }
}
</script>

<style scoped lang="scss">
    .main_con{
        // width: 100%;
        // height: 100%;
    }
    .main_top{
        display: flex;
        margin: 5px 5px 7px 5px;
    }
    .main_top_left{
        width: 100%;
        box-sizing: border-box;
        // padding-right: 14px;
    }
    .main_top_right{
        width: 30%;

        .data_area{
            height: 100%;
        }
        .tq_area{
            height: 100%;
            
            p{
                text-align: right;
                font-size: 20px;
            }
            h3{
                padding: 15px 0;
                font-size: 22px;
                font-weight: 500;
            }
            span{
                display: inline-block;
                width: 90px;
                font-size: 22px;
                font-weight: 500;

                b{
                    font-size: 30px;
                }
            }
        }
    }

    .main_bottom{
        box-sizing: border-box;
        padding:7px 5px 5px 5px;
        display: flex;

        .main_bottom_left{
            width: 70%;
            // min-height: 520px;
            // max-height: 650px;
            box-sizing: border-box;
            padding-right:14px ;
 
            .title{
                width: 100%;
                padding-bottom: 10px;
                span{
                    float: right;
                    font-size: 16px;
                    font-weight: normal;
                    cursor:pointer;
                    color: #3D7EFF;
                }
                span:hover{
                    color: #6498ff;
                }

            }

        }

        .main_bottom_right{
            width: 30%;
        }

        .info_area{
            height: 30%;
            .el-card{
                height: 100%;
            }
            p{
                padding-top: 15px;
                font-size: 16px;
            }
            .el-button{
                font-size: 16px;
            }
        }
        .matter_area{
            height: 40% ;
            box-sizing: border-box;
            padding: 14px 0;
            .el-card{
                height: 100%;
                .info{
                    background-color: #f4f7f9;
                    border-radius: 5px;
                    height: 45px;
                    line-height: 45px;
                    margin-top: 15px;
                    font-size: 16px;
                    .icon{
                        height: 45px;
                        width: 45px;
                        float: left;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }
    
        .login_area{
            height: 30%;
            .el-card{
                height: 100%;
            }
            p{
                padding-top: 15px;
            }
        }
    }

    .data_area_child{
        // margin: 10px 5px 0px 5px;
        height: 110px;
        background-color: #f4f7f9;
        border-radius: 5px;
        position: relative;
        p{
            font-size: 18px;
            font-weight: 550;
            padding: 20px;
        }
        .nun_btn{
            position: absolute;
            bottom: 0px;
            width: 100%;

            span{
                font-size: 28px;
                padding: 15px 0px 15px 20px;
            }

            .btn{
                padding: 15px 15px 15px 0px;
                float: right;
            }
        }
    }

    ::v-deep .el-table th > .cell {
        text-align: center;
    }
    ::v-deep .el-table .cell {
        text-align: center;
    }  
</style>

